<template>
    <div id="roof">
        <div class="box" v-if="visible">
            <div class="smallBox">
                <slot name="change">
                    <h1>这是一个模态框</h1>
                </slot>
                <button @click="close">确定</button>
            </div>
        </div>
    </div>
  
</template>

<script>
export default {
props:{
    visible:{
        type: Boolean,
        default(){
            return true
        }
    }
},
methods:{
    close(){
        this.$emit('close')
    }
}
}
</script>

<style scoped>
*{
    margin:0;
    padding:0;
}
html,body,#roof{
    height: 100%;
}
.box{
    background-color: rgba(0,0,0,.3);
    height: 100%;
    width: 100%;
    display: flex;
    position: fixed;
    left:0;
    top:0;
    justify-content: center;
    align-items: center;


}
.smallBox{
    width:300px;
    height:200px;
    background-color:pink;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
h1{
    margin-bottom: 50px;
}
button{
    width:80px;
    height:30px;
    background-color: aquamarine;
    border:none;
    border-radius: 5px;
}
</style>